<script>
/**
 * @name: top toast
 * @desc: 全局提示文本
 * @prop {Array!} list 提示列表,多个时,逐个排列下来
 * @prop {String} list[].id 提示项的id
 * @prop {String} list[].type 提示的类型,可选项:['info':'一般信息','success':'成功','waring':'警告','error':'错误']
 * @prop {String} list[].title 提示的标题
 * @prop {Stirng} list[].content 提示的文本内容
 */

import infoIcon from '@/assets/icons/info-circle-o.png'
import checkIcon from '@/assets/icons/check-close-circle-o.png'
import errorIcon from '@/assets/icons/close-circle-o.png'
import warnIcon from '@/assets/icons/warning-circle-o.png'

export default {
  name: 'top-toast',
  props: { list: Array },
  data: () => ({
    infoIcon,
    checkIcon,
    errorIcon,
    warnIcon
  }),
  methods: {
    icon(type) {
      const iconMap = { info: infoIcon, success: checkIcon, warning: warnIcon, error: errorIcon }
      return iconMap[type]
    }
  }
}
</script>

<template>
  <div class="top-toast">
    <transition-group name="list-complete" tag="div">
      <div
        v-for="v in list"
        :key="v.id"
        v-if="v.content"
        class="toast-item"
      >
        <i class="icon" :style="{backgroundImage:`url('${icon(v.type)}')`}"></i>
        <div class="article">
          <h2 class="title" v-if="v.title">{{v.title}}</h2>
          <p class="content">{{v.content}}</p>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<style lang="stylus">
$icon-size = 24px;

.top-toast {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;

  .toast-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;
    transition: all 0.25s;
  }

  .icon {
    width: $icon-size;
    height: $icon-size;
    margin-right: 10px;
    background: center / cover no-repeat;
  }

  .article {
    text-align: left;
    font-size: 14px;

    >.title {
      margin-bottom: 10px;
    }

    >.content {
      white-space: nowrap;
    }
  }
}

.list-complete-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.list-complete-leave-to {
  opacity: 0;
}

.list-complete-leave-active {
  position: relative;
}
</style>
